<template>
  <el-dialog
    center
    v-dialogDrag
    title="收费标准设置"
    v-loading="loading"
    :width="dialogWidth"
    :before-close="close"
    v-if="feeStandardDialog"
    :visible.sync="feeStandardDialog"
  >
    <el-form
      ref="form"
      :model="form"
      v-loading="loading"
      label-position="right"
      class="overflow pl15 pr15"
    >
      <el-row
        type="flex"
        :key="index"
        justify="center"
        class="mt20 mb10"
        style="border: 1px dashed #cfcfcf;"
        v-for="(item, index) in feeStandardList"
      >
        <el-col :span="22" class="pt20 form-inp">
          <el-row type="flex" justify="center">
            <el-col :span="24" class="mb15 form-inp">
              <el-form-item
                label="收费名称："
                prop="name"
                :label-width="labelWidth"
              >
                <el-input
                  class="small-inp"
                  autocomplete="off"
                  v-model="item.name"
                  placeholder="请输入收费名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="24" class="mb15 form-inp">
              <el-form-item
                class="inline-block"
                label="价格："
                prop="price"
                :label-width="labelWidth"
              >
                <el-input
                  class="small-inp"
                  autocomplete="off"
                  v-model="item.price"
                  placeholder="请输入价格"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="inline-block"
                label="单位："
                prop="departmentIds"
                :label-width="labelWidth"
              >
                <el-select
                  class="small-select"
                  v-model="item.unit"
                  placeholder="请选择单位"
                >
                  <el-option
                    :key="item.id"
                    :value="item.name"
                    :label="item.name"
                    v-for="item in unitList"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="24" class="mb15 form-inp">
              <el-form-item
                label="说明："
                prop="remark"
                :label-width="labelWidth"
              >
                <el-input
                  type="textarea"
                  autocomplete="off"
                  v-model="item.remark"
                  placeholder="请输入说明"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col
          :span="2"
          class="form-inp relative"
          style="border-left: 1px dashed #cfcfcf;"
        >
          <i
            aria-hidden="true"
            @click="hendleDelete(index, item.id)"
            class="fa fa-trash-o fa-2x absolute x-y-center pointer"
          ></i>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="24" class="mt15 form-inp">
          <el-form-item>
            <el-button class="theme-btn" @click="handleAddFeeStandard"
              >新增任务类别</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer align-center tiling inline-block">
      <el-button @click="close">取 消</el-button>
      <el-button class="theme-btn" @click="handleSetFeeStandard"
        >保存</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import "@/utils/drag.js";
import {
  setFeeStandard,
  getAllFeeStandard,
  deleteFeeStandard
} from "@/apis/business";

export default {
  name: "Fee_standard_dialog",
  data() {
    return {
      form: {},
      deptList: [],
      labelWidth: "110px",
      dialogWidth: "560px",
      unitList: [
        { name: "年" },
        { name: "月" },
        { name: "日" },
        { name: "度" },
        { name: "千瓦时" },
        { name: "立方米" },
        { name: "吨" },
        { name: "㎡/月" },
        { name: "平方米" }
      ],
      feeStandardList: []
    };
  },
  watch: {
    feeStandardDialog() {
      this.feeStandardDialog && this.resetForm();
      this.feeStandardDialog && this.getFeeStandards();
    }
  },
  methods: {
    async getFeeStandards() {
      const { rows } = await getAllFeeStandard({
        apartmentId: +sessionStorage.getItem("apartmentId")
      });

      this.feeStandardList = rows;
    },
    emptyJudge(arr) {
      let isEmpty = false;

      arr.forEach(item => {
        if (!item.name || !item.price) {
          isEmpty = true;
        }
      });
      return isEmpty;
    },
    maxJudge(arr) {
      let isMax = false;

      arr.forEach(item => {
        if (item.name.length > 30) {
          isMax = true;
        }
      });
      return isMax;
    },
    handleSetFeeStandard() {
      const isMax = this.maxJudge(this.feeStandardList);
      const isEmpty = this.emptyJudge(this.feeStandardList);

      if (isEmpty) {
        return this.$notify.error({
          title: "错误",
          message: "不能为空值！"
        });
      }

      if (isMax) {
        return this.$notify.error({
          title: "错误",
          message: "字符长度超过最大值！"
        });
      }

      const taskCategories = this.feeStandardList.map(item => {
        if (item.id) {
          return {
            id: item.id,
            name: item.name,
            unit: item.unit,
            price: item.price,
            remark: item.remark,
            apartmentId: +sessionStorage.getItem("apartmentId")
          };
        } else {
          return {
            name: item.name,
            unit: item.unit,
            price: item.price,
            remark: item.remark,
            apartmentId: +sessionStorage.getItem("apartmentId")
          };
        }
      });

      this.$store.dispatch("load/setLoading", true);
      // setFeeStandard(taskCategories).then(res => {
      //   this.$message({
      //     type: "success",
      //     message: res.msg
      //   });
      //   this.$emit("update");
      //   this.$emit("close");
      // });
      this.$message({
        type: "success",
        message: "操作成功！"
      });
      this.$emit("update");
      this.$emit("close");
    },
    handleAddFeeStandard() {
      this.feeStandardList.push({
        name: "",
        unit: "",
        price: "",
        remark: "",
        departmentIds: [],
        apartmentId: +sessionStorage.getItem("apartmentId")
      });
    },
    close() {
      this.$emit("close");
    },
    hendleDelete(i, id = 0) {
      id &&
        deleteFeeStandard({ apartmentChargeId: id }).then(res => {
          this.$message({
            type: "success",
            message: res.msg
          });
        });
      this.feeStandardList.splice(i, 1);
    },
    resetForm() {
      this.feeStandardList = [];
    }
  },
  props: ["feeStandardDialog", "loading"]
};
</script>

<style scoped></style>
